<template>
  <div class="feedback-container">
    <com-tab-bar :title="title"/>
    <div class="feedback-box">
      <h3 class="title-tip">你好,请选择标签?</h3>
      <ul class="tags-list" ref="mTagSelect">
        <van-button 
          v-for="(mTag, index) in feedbackData"
          round
          :Key="index"
          size="small"
          class="tags-list-item"
          @click="selectTag(mTag, index)">
          {{mTag}}
        </van-button>
      </ul>
    </div>
    <div class="feedback-box your-content">
      <h3 class="title-tip">具体建议内容</h3>
      <van-field
        class="your-content-input"
        v-model="message"
        autosize=""
        size="large"
        type="textarea"
        maxlength="200"
        placeholder="请输入留言"
        show-word-limit
      />
    </div>
    <div class="feedback-box">
      <h3 class="title-tip your-upload-tip">上传图片<span>(限制最大{{fileCountLimit}}张图片)</span></h3>
      <van-uploader
        class="your-upload-box"
        v-model="fileList"
        multiple
        :max-count="fileCountLimit"
        :max-size="fileSizeLimit"
        @oversize="onFileOversize"
      />
    </div>
    <!-- 联系电话 -->
    <van-row>
      <van-field
      class="feedback-telephone"
      v-model="phone"
      center
      clearable
      label="联系方式:"
      :placeholder="userPhoneTip"/>
    </van-row>
    <van-button class="feedback-sumbit" block type="info" native-type="submit" @click="commitFeedback">
      提交
    </van-button>
  </div>
</template>

<script>
import comTabBar from '../../components/comTapBar'
import { UtilHelper } from '../../utils/util'
import xss from 'xss'

export default {
  components: {
    comTabBar
  },
  data() {
    return {
      phone: '',
      test: '',
      message: '', // 建议文字
      fileList: [], // 图片上传
      selectArray: [], // 标签选择
      title: '意见反馈',
      feedbackData: [
        '术前咨询/保障', '到店咨询',
        '优惠促销', '派单/录单',
        '我要投诉', '其他'
      ],
      fileSizeLimit: 512000, // 单位：k 现在每张图片的大小
      fileCountLimit: 3 // 上传图片限制数量
    }
  },
  computed: {
    userPhoneTip() {
      // 从vuex中获取
      return '135****4409'
    }
  },
  methods: {
    selectTag(item, index) {
      // 选择某项/多选
      if (!item) { return }
      try {
        const activeClassName = 'tags-list-item-active'
        const _ps = document.querySelectorAll('.tags-list-item')[index]
        const _psClassList = _ps.classList
        const _bool = _psClassList.toggle(activeClassName)
        if (_bool) {
          this.selectArray.push(item)
          this.selectArray = Array.from(new Set(this.selectArray))
        }else {
          this.selectArray.pop(item)
        }
      } catch (error) {
        console.log(error)
      }
    },
    commitFeedback() {
      // 点击提交
      // 判断需要上交的参数
      if (this.selectArray.length <= 0) {
        this.$toast('请选择你要反馈的类别')
        return
      }
      const _message = xss(this.message)
      const base64Array = this.fileList.map(item=>item.content)
      // TODO 
      const uploadData = {
        types: this.selectArray,
        content: _message,
        images: base64Array,
        uploadTime: new Date().getTime()
      }
      console.log(uploadData)
      this.$toast('上传的服务器接口尚在开发中...')
    },
    onFileOversize() {
      this.$toast(`此图片已超过 ${this.fileSizeLimit/1000}k`)
    }
  }
}
</script>

<style lang="scss">
@import "../../assets/style/global.scss";

.feedback-container {
  position: relative;
  width: 100%;
  .tags-list {
    width: 100%;
    padding: 4px;
    .tags-list-item {
      border: none !important;
      background: #f1eeee;
      color: rgb(65, 65, 65);
      width: 29.3%;
      margin: 0 2%;
      margin-top: 16px !important;
      box-sizing: border-box;
      span {
        @include ellipsis;
      }
    }
    .tags-list-item-active {
      color: #fff;
      background: #00e1f1;
    }
  }
  .your-content-input {
    /deep/.van-field__body {
      min-height: 100PX !important;
      align-items: flex-start !important;
    }
  }
  .your-upload-tip span {
    font-size: 12px;
    padding-left: 4px;
  }
  .your-upload-box {
    margin-top: 12px;
    /deep/.van-uploader__preview {
      margin: 16px !important;
    }
  }
  .feedback-sumbit {
    @include btn;
    width: 80%;
    margin: 4px auto;
    border-radius: 4px;
  }
  // **
  .feedback-box {
    position: relative;
    width: 100%;
    padding: 6px 12px;
  }
  .title-tip {
    position: relative;
    width: 100%;
    font-size: 14px;
    box-sizing: border-box;
    padding-left: 12px;
  }
  .title-tip::after {
    content: '';
    background: #46d7dc;
    display: inline-block;   
    width: 2px;
    height: 14px;
    border-radius: 2px;
    position: absolute;
    left: 0;
    top: 2px;
  }
}
</style>